class Home {
    constructor() {
        this.showMenu();
    }
    showMenu() {
        document.getElementById("menu-content").innerHTML =
           `<wcs-sidebar-menu id="menu">
                <script type="application/json">
                {
                    "menuData" : ${JSON.stringify(this.getMenuData())},
                    "collapseAll":"console.log(1111)",
                    "cssStyle":":host{background: transparent;}",
                    "collapseIcon":"<sl-tooltip content='collapse all'><sl-icon name='chevron-bar-contract' label='Add to favorites'></sl-icon></sl-tooltip>"
                }
                </script>
            </wsc-sidebar-menu>`;
    }
    getMenuData(){
        return  {
            "search": true,
            "collapse":true,
            "items": [
                {
                    "title": "仪表盘",
                    "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>",
                    "children": [
                        { "title": "概览", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" },
                        {
                            "title": "统计",
                            "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>",
                            "children": [
                                { "title": "实时数据", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" },
                                { "title": "历史数据", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" }
                            ]
                        }
                    ]
                },
                {
                    "title": "设置",
                    "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>",
                    "children": [
                        { "title": "用户管理", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" },
                        { "title": "用户数据", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" },
                        { "title": "系统设置", "icon": "<sl-icon name='star-fill' label='Add to favorites'></sl-icon>" }
                    ]
                }
            ]
        }
    }
}
document.addEventListener('DOMContentLoaded',
    async function () {
        const localeUtil = new Locale();
        const systemLocalStorage = new SystemLocalStorage();
        await localeUtil.translate(systemLocalStorage.locale, "template-home", "content-home");
        const home = new Home();
        document.getElementById('btn-contract').addEventListener('click', () => {
            document.getElementById("div-left").classList.add("contract"); 
            const event = new CustomEvent('contract-menu-event', { detail: { message: 'contract' } });
            document.querySelector('wcs-sidebar-menu').dispatchEvent(event);
        });
        document.getElementById('btn-expand').addEventListener('click', () => {
            document.getElementById("div-left").classList.remove("contract");
            const event = new CustomEvent('expand-menu-event', { detail: { message: 'expand' } });
            document.querySelector('wcs-sidebar-menu').dispatchEvent(event);
        });
        document.addEventListener('open-menu-event', (e) => {
            console.log('选中菜单:', e.detail.menuItem);
        });
    }
);

